<template>
    <div class="container">
        <div class="select">
            <el-select class="selectNs" v-model="selectedNs" placeholder="请选择命名空间">
                <el-option
                v-for="ns in this.nsList"
                :key="ns"
                :label="ns"
                :value="ns">
                    {{ ns }}
                </el-option>
            </el-select>
            <el-select class="selectDeployment" v-model="selectedDeployment" placeholder="请选择deployment">
                <el-option
                v-for="deployment in this.deploymentList"
                :key="deployment"
                :label="deployment"
                :value="deployment">
                    {{ deployment }}
                </el-option>
            </el-select>
            <el-select class="selectPod" v-model="selectedPod" placeholder="请选择pod">
                <el-option  
                v-for="pod in this.podsList" 
                :key="pod"
                :label="pod"
                :value="pod"
                >{{ pod }}</el-option>
            </el-select>
        </div>
        <div><el-button type="success" @click="goToDeployments">返回</el-button></div>
        <div class="log" v-html="podLogs"></div>
    </div>
</template>
<script>
import { getNsList } from '@/api/ns'
import { getPodList } from '@/api/pods'
import { getList as getDeploymentList } from '@/api/deployments'
import { getPodLogs } from '@/api/podLogs'
export default {
    data() {
        return {
            podsList: "",
            deploymentList: "",
            nsList: "",
            selectedPod: null,
            selectedDeployment: null,
            selectedNs: null,
            podLogs: "",
        }
    },
    created() {
        this.fetchData()
        if (this.$route.params.deployment && this.$route.params.ns) {
            this.selectedNs = this.$route.params.ns
            this.selectedDeployment = this.$route.params.deployment
        }
    },
    watch: {
        selectedNs: function(newNamespace) {
            if (newNamespace) {
                getDeploymentList(newNamespace).then(response => {
                    this.deploymentList = response.data.map(deployment => deployment.Name)
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        selectedDeployment: function(newDeployment) {
            if (newDeployment) {
                getPodList(this.selectedNs, newDeployment).then(response => {
                    this.podsList = response.data
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        selectedPod: function(newPod) {
            if (newPod) {
                getPodLogs(this.selectedNs, this.selectedPod).then(response => {
                    this.podLogs = "</br>" + this.replaceN2Br(response.data)
                }).catch(error => {
                    console.log(error)
                })
            }
        },
    },
    methods: {
        fetchData() {
            getNsList().then(response => {
                this.nsList = response.data
            })
        },
        goToDeployments() {
            this.$router.push('/k8s/deployment')
        },
        replaceN2Br(text) {
            return text.replace(/\n/g, '<br>')
        }
    },
}
</script>
<style>
.container {
    margin: 10px 10px 10px 10px;
}
.select {
    float: left;
    margin-right:30px;
}
.selectPod {
    margin-left: 5px;
    margin-right: 5px;
}
.selectDeployment {
    margin-left: 5px;
    margin-right: 5px;
}
.log {
    margin-top: 15px;
    max-height: 600px;
    scrollbar-width: thin;
    scrollbar-color: dark #282c34;
    overflow-y: auto;
    outline: none;
    background: #282c34;
    color: #abb2bf;
    font-family: "Menlo", consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.4rem;
}
.log::-webkit-scrollbar {
    height: 12px; /* 滚动条的高度 */
    background-color: #282c34; /* 滚动条背景颜色 */
}

.log::-webkit-scrollbar-thumb {
    background-color: #4a4a4a; /* 滚动条滑块颜色 */
    border-radius: 6px; /* 滑块的圆角 */
    border: 2px solid transparent; /* 滑块边框 */
    background-clip: padding-box; /* 保持背景在边框内部 */
}

.log::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 鼠标悬停时滑块的颜色 */
}

.log::-webkit-scrollbar-track {
    background-color: #282c34; /* 滚动条轨道的颜色 */
}

.log::-webkit-scrollbar-corner {
    background-color: transparent; /* 滚动条角落的颜色 */
}
</style>